<template>
	<view class="releate">
		<y-cubar title=" " :bgColor="`rgba(255,255,255,${opacity})`" />
		<view class="releate-bg"></view>
		<view class="hand-top">
			<view class="hand-top-left">
				<image class="title" src="/static/releate/title.png" mode=""></image>
				<view class="more">
					<view class="more-span">
						<image src="/static/releate/success.png" mode=""></image>
						<text>有保障</text>
					</view>
					<view class="more-span">
						<image src="/static/releate/success.png" mode=""></image>
						<text>专业服务</text>
					</view>
					<view class="more-span">
						<image src="/static/releate/success.png" mode=""></image>
						<text>交易安全</text>
					</view>
				</view>
			</view>
			<image class="bg" src="/static/releate/bg.png" mode=""></image>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">城市</view>
				<view class="select" @click="handCity">
					<view class="select-val">
						<text v-if="queryform.cityName">{{ queryform.cityName }}</text>
						<text class="place" v-else>请选择</text>
					</view>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="form-item">
				<view class="label">需求标题</view>
				<view class="textarea">
					<uv-textarea v-model="queryform.title" border="none" :maxlength="30" count
						placeholder="请输入"></uv-textarea>
				</view>
			</view>
			<view class="form-item">
				<view class="label">月租金区间</view>
				<view class="zujin">
					<view class="zujin-input">
						<text>￥</text>
						<view class="input">
							<input v-model="queryform.lowestPrice" type="number" placeholder-class="place"
								placeholder="自定义最低价格">
						</view>
					</view>
					<view class="line"></view>
					<view class="zujin-input">
						<text>￥</text>
						<view class="input">
							<input v-model="queryform.tallPrice" type="number" placeholder-class="place"
								placeholder="自定义最高价格">
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">营业类型</view>
				<view class="btns">
					<button class="cu-btn" :class="{ 'cu-btn-active' : queryform.type === 'OPERATE' }"
						@click="typeChange('OPERATE ')">营运</button>
					<button class="cu-btn" :class="{ 'cu-btn-active' : queryform.type === 'NOT_OPERATE' }"
						@click="typeChange('NOT_OPERATE')">非营运</button>
				</view>
			</view>
			<view class="form-item">
				<view class="label">可跑平台</view>
				<view class="select" @click="handChoosePlat">
					<view class="select-val">
						<text v-if="queryform.platform">{{ queryform.platform }}</text>
						<text class="place" v-else>请选择</text>
					</view>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="form-item">
				<view class="label">其他要求</view>
				<view class="textarea">
					<uv-textarea v-model="queryform.otherRequire" border="none" placeholder="请输入其他要求"></uv-textarea>
				</view>
			</view>
			<view class="submit">
				<button class="cu-btn" @click="handSubmit">发布</button>
			</view>
		</view>
		<plat-form-dia ref="platRef" @change="platChange" />
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		doAdd
	} from '@/apis/demand.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		doDetail
	} from '@/apis/demand.js'
	import {
		storeToRefs
	} from 'pinia'
	import YCubar from '@/components/y-cubar/index.vue'
	import platFormDia from './components/platformDia.vue'
	const useStore = useAppsStore()
	const {
		getCityName: cityName
	} = storeToRefs(useStore)
	const {
		proxy
	} = getCurrentInstance();
	const $back = inject('$back')
	const opacity = ref(0)
	onPageScroll((e) => {
		const childerOpa = Number((e.scrollTop / 200).toFixed(2))
		opacity.value = childerOpa >= 1 ? 1 : childerOpa
	})

	const current = ref(0)
	const tabChange = (e) => {
		current.value = e
	}

	const handCity = () => {
		uni.navigateTo({
			url: '/pagesA/other/city?type=1',
			events: {
				someEvent: async (e) => {
					queryform.value.cityName = e.fullname
				}
			}
		})
	}

	const queryform = ref({
		title: '',
		lowestPrice: '',
		tallPrice: '',
		type: 'OPERATE',
		platform: '',
		otherRequire: ''
	})
	let loading = false
	const handSubmit = async () => {
		const params = uni.$uv.deepClone(queryform.value)
		if (!params.cityName) {
			uni.$uv.toast('请选择城市')
			return
		}
		if (!params.title) {
			uni.$uv.toast('请输入需求标题')
			return
		}
		if (!params.lowestPrice) {
			uni.$uv.toast('请输入自定义最低价格')
			return
		}
		if (!params.tallPrice) {
			uni.$uv.toast('请输入自定义最高价格')
			return
		}
		console.log(params)
		if (Number(params.tallPrice) < Number(params.lowestPrice)) {
			uni.$uv.toast('最高价格不能小于最低价格')
			return
		}
		if (!params.platform) {
			uni.$uv.toast('请选择可跑平台')
			return
		}
		if (loading) return
		loading = true
		try {
			await doAdd(params)
			uni.$uv.toast('发布成功')
			const eventChannel = proxy.getOpenerEventChannel()
			eventChannel.emit('successEvent');
			setTimeout(() => {
				$back()
			}, 500)
		} catch (e) {
			loading = false
		}

	}
	const typeChange = (e) => {
		queryform.value.type = e
	}

	const platRef = ref()
	const handChoosePlat = () => {
		platRef.value.handOpen(queryform.value.platform.split(','))
	}

	const platChange = (e) => {
		queryform.value.platform = e
	}

	onLoad(async (e) => {
		queryform.value.cityName = cityName.value
		if (e?.id) {
			const data = await doDetail(e.id)
			queryform.value = {
				title: data.title,
				cityName: data.cityName,
				lowestPrice: data.lowestPrice,
				tallPrice: data.tallPrice,
				type: data.type,
				platform: data.platform,
				otherRequire: data.otherRequire
			}
		}
	})
</script>

<style lang="scss" scoped>
	.releate {
		min-height: 100vh;
		background-color: #F5F5F5;

		&-bg {
			width: 750rpx;
			height: 408rpx;
			background: linear-gradient(179deg, #FFEFC9 0%, #F5F5F5 100%);
			position: absolute;
			top: 0;
		}

		.hand-top {
			display: flex;
			justify-content: space-between;
			position: relative;
			padding: 18rpx 24rpx 18rpx 40rpx;
			z-index: 2;

			&-left {
				.title {
					margin-top: 50rpx;
					width: 326.19rpx;
					height: 42.09rpx;
				}

				.more {
					margin-top: 26rpx;
					display: flex;
					align-items: center;

					&-span {
						display: flex;
						align-items: center;

						&:not(:first-child) {
							margin-left: 28rpx;
						}

						image {
							width: 19.22rpx;
							height: 19.22rpx;
						}

						text {
							margin-left: 6rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.bg {
				width: 269.28rpx;
				height: 207.71rpx;
			}
		}

		.form {
			margin-top: -40rpx;
			position: relative;
			z-index: 3;
			background-color: #FFF;
			border-radius: 32rpx 32rpx 0 0;
			padding: 32rpx;
			padding-bottom: 80rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 80rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);

			&-item {
				&:not(:first-child) {
					margin-top: 40rpx;
				}

				.label {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.textarea {
					margin-top: 32rpx;
				}

				.select {
					margin-top: 32rpx;
					height: 94rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 32rpx;

					&-val {
						flex: 1;

						.place {
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}

				.zujin {
					display: flex;
					align-items: center;
					margin-top: 32rpx;

					.zujin-input {
						flex: 1;
						height: 88rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						padding: 0 38rpx;

						text {
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.input {
							margin-left: 10rpx;
							flex: 1;

							input {
								width: 100%;
							}

							.place {
								color: #CCCCCC;
							}
						}
					}

					.line {
						width: 32rpx;
						height: 2rpx;
						background-color: #DDDDDD;
						margin: 0 16rpx;
					}
				}

				.btns {
					margin-top: 32rpx;
					display: flex;
					align-items: center;

					.cu-btn {
						width: 312rpx;
						height: 88rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						border: 1rpx solid #F5F5F5;

						&:last-child {
							margin-left: 62rpx;
						}

						&-active {
							background: #FFF7E4;
							border-color: #FF930D;
							color: #FF930D;
						}
					}
				}
			}
		}

		.submit {
			margin-top: 40rpx;

			.cu-btn {
				width: 686rpx;
				height: 100rpx;
				background: #FFC434;
				border-radius: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>